<template>
    <section class="login">
        <section>
            <h5><img src="~path_img/logo.png" alt=""></h5>
            <h6>AI学科报告登录</h6>
            <article class="input">
                <van-icon name="friends-o" size="30"/>
                <input type="text" placeholder="请选择学校" readonly v-model="xuexiao_value" @click="xuexiao_show = true">
            </article>
            <article class="input">
                <van-icon name="user-o" size="30"/>
                <input type="text" placeholder="请输入学号" v-model="form_data.username">
            </article>
            <article class="input">
                <van-icon name="shield-o" size="30"/>
                <input type="password" placeholder="请输入密码" v-model="form_data.password">
            </article>
            <article class="input">
                <van-icon name="shield-o" size="30"/>
                <input type="text" placeholder="验证码" v-model="form_data.captcha">
                <img :src="yanzhenma" alt="" @click="get_yzm()" v-if="yanzhenma">
            </article>
            <p class="bottom-p">
                <router-link to="bangding1">立即注册绑定</router-link>
            </p>
            <article>
                <van-button type="primary" size="large" @click="login()" color="#F5BB19">登&nbsp;&nbsp;&nbsp;&nbsp;录</van-button>
            </article>
        </section>

        <!--选择学校-->
        <van-popup v-model="xuexiao_show" position="bottom">
            <van-picker
                    show-toolbar
                    :columns="xuexiao_list"
                    @confirm="xuexiao_onConfirm"
                    @cancel="xuexiao_show = false"
            />
        </van-popup>
        <!--选择学校-->
    </section>
</template>

<script>
    export default {
        name: "login",
        data(){
            return {
                yanzhenma: '',
                xuexiao_list: [],
                xuexiao_value: '',
                xuexiao_show: false,
                form_data: {
                    username: '',
                    password: '',
                    captcha: '',
                    key: '',
                    xuexiao: '',
                    merId: ''
                }
            }
        },
        mounted() {
            this.$store.commit('merId',this.$route.query.merId);
            this.form_data.merId = this.$route.query.merId || null;
            this.$store.commit('login_token','')
            this.$store.commit('token','')
            this.get_yzm()
            this.$https.fetchGet('/common/get_xuexiao').then( res=> {
                this.xuexiao_list = res.data.map((item) => {
                    return {
                        id: item.id,
                        text: item.name
                    }
                })
            })
        },
        methods: {
            xuexiao_onConfirm(item){
                if(item != null){
                    this.xuexiao_value = item.text
                    this.form_data.xuexiao = item.id
                }
                this.xuexiao_show = false
            },
            get_yzm(){
                this.$https.fetchGet('Captcha',{}).then(res => {
                    this.yanzhenma = res.imageUrl.img
                    this.form_data.key = res.imageUrl.key
                })
            },
            login(){
                let _this = this,res = /^[\S]{6,20}$/
                if(this.form_data.username == ''){
                    this.$toast('请输入学号')
                }
                else if(this.form_data.password == ''){
                    this.$toast('请输入密码')
                }
                // else if(!res.test(this.form_data.password)){
                //     this.$toast('密码必须6到20位，且不能出现空格')
                // }
                else if(this.form_data.captcha == ''){
                    this.$toast('请输入验证码')
                }
                else{
                    this.$https.fetchPost('/login',this.form_data).then( res => {
                        if (res.code == 0){
                            _this.$toast('登录成功');
                            _this.$store.commit('token',res.data)
                            setTimeout((res) => {
                                _this.$router.push('/index')
                            },1000)
                        }
                        else{
                            if(res.code == 2100){
                                this.$toast(res.msg);
                                setTimeout( () => {
                                    _this.get_yzm()
                                },1000)
                            }
                            else if(res.code == 2101){
                                this.$toast(res.msg);
                                setTimeout( () => {
                                    _this.$router.push('/bangding1')
                                },1000)
                            }
                            else{
                                this.$toast(res.msg);
                                setTimeout( () => {
                                    _this.get_yzm()
                                },1000)
                            }
                        }
                    })
                }
            }
        }
    }
</script>
<style>
    #app{
        min-height: 100%;
        height: 100%;
    }
</style>
<style scoped lang="less">
    .login{
        width: 100%;
        background: url("~path_img/logo.jpg") center no-repeat;
        background-size: cover;
        height: 100%;
        display: flex;
        align-items: center;
        justify-items: center;
        padding: 0 .6rem;
        section{
            width: 100%;
            h5{
                /*letter-spacing: 10px;*/
                /*color: #fff;*/
                /*font-size: .8rem;*/
                margin-bottom: .7rem;
                img{
                    width: 2.6rem;
                }
            }
            h6{
                font-size: .6rem;
                color: #fff;
                margin-bottom: .6rem;
            }
            .input{
                width: 100%;
                background-color: #fff;
                display: flex;
                height: 1.5rem;
                align-items: center;
                background-color: #fff;
                position: relative;
                margin-bottom: .8rem;
                border-radius: .4rem;
                overflow: hidden;
                box-shadow: 0 0 20px rgba(0,0,0,0.2);
                i{
                    width: 17%;
                    border-right: 1px solid #ccc;
                }
                input{
                    padding: 0 .2rem;
                    font-size: .44rem;
                    width: 83%;
                    height: 1.5rem;
                    border: none;
                    color: #666;
                }
                img{
                    height: 1.5rem;
                    position: absolute;
                    width: 3rem;
                    right: 0;
                    top: 0;
                }
            }
            .bottom-p{
                margin:-.2rem 0 .4rem;
                text-align: right;
                font-size: .4rem;
                a{
                    color: #fff;
                }
            }
            button{
                border-radius: .4rem;
                height: 55px;
            }
        }
    }
</style>
